import ChartTitle from '@/components/Visual/chartTitle';
import { useEffect, useRef, useState } from 'react';
import './index.less'; //import classnames for CSS support
import type { EntryRates } from '../types';
function RecordFeedBackForm(props: { entryRates: EntryRates[] }) {
  // let animationHandler: NodeJS.Timeout;
  const aveHeight = 36;
  const rowNum = 5;
  const [animationIndex, setAnimationIndex] = useState(0);
  const [height1, setHeights] = useState<number[]>([]);
  const { entryRates } = props;
  // console.log(entryRates);
  const [data, setData] = useState<EntryRates[]>(entryRates);
  const [rows, setRows] = useState<any[]>([]); //实际上显示在列表上的数据
  // eslint-disable-next-line react-hooks/exhaustive-deps
  const animation = async () => {
    const animationNum = 1; //每次动画移动的数量
    if (rowNum > data.length) {
      return;
    }
    const row: any[] = [...data];
    row.forEach((item, i) => {
      item.ranking = i + 1;
    });
    const rows1 = row.slice(animationIndex);
    rows1.push(...row.slice(0, animationIndex));
    // rows1.forEach((item, i) => {
    //   item.ranking = i;
    // });
    // console.log(rows1, '每列排布数据');
    setRows(rows1.slice(0, rowNum + 1));
    const heights = new Array(data.length).fill(aveHeight);
    setHeights(heights);
    let index = animationIndex;
    index += animationNum;
    // console.log(index);
    const back = index - data.length;
    if (back >= 0) {
      index = back;
    }
    await new Promise((resolve) => {
      setTimeout(resolve, 300);
    });
    const newHeights = [...height1];
    newHeights.splice(0, animationNum, ...new Array(animationNum).fill(0));
    setHeights(newHeights);
    setAnimationIndex(index);
    // console.log('执行到这里来了吗');
  };

  const callbackRef = useRef(animation);
  useEffect(() => {
    // console.log(height1, '高度数组');
    // console.log(animationIndex, 'index');
    // if (height1[0] === 0) {
    // console.log('我将执行多少次呢');
    callbackRef.current = animation;
    // }
  }, [animation, animationIndex, entryRates]);

  useEffect(() => {
    animation();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [data]);

  useEffect(() => {
    // console.log('执行了吗');
    // console.log(data, '列表数据项');
    // console.log(entryRates, '传过来的props值');
    setData(entryRates);
    animation();
    function tick() {
      callbackRef.current();
    }
    const timeId = setInterval(tick, 1800);
    return () => {
      clearInterval(timeId);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [entryRates]);
  return (
    <div className="record_feedback_form">
      <div className="title">
        <ChartTitle title="录单率排行" />
        <img className="polyline" src="/visual/tabTitlePolyline.svg" alt="" />
        <img className="diamond" src="/visual/titleRectangle.svg" alt="" />
      </div>
      <div className="table">
        {/* <header> */}
        <ul>
          <li>#</li>
          <li>路段名称</li>
          {/* <li>泊位编号</li> */}
          <li>录单率</li>
        </ul>
        {/* </header> */}
        <div className="scroll_list" style={{ height: '180px' }}>
          {rows.map((item, i) => (
            <div
              className="item"
              key={item._id}
              style={{ height: `${height1[i]}px`, boxSizing: 'border-box' }}
            >
              <span>{item.ranking}</span>
              <span>{item.parkingLotName}</span>
              {/* <span>{item.space_no}</span> */}
              <span>{(item.entryRate * 100).toFixed(2) + '%'}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export default RecordFeedBackForm;
